<template>
  <a-modal
    title="任务详情列表"
    style="top: 20px;"
    :width="1024"
    v-model="visible"
    :maskClosable="false"
    :footer="null">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="16">
          <a-col :md="6" :xs="24">
            <a-form-item>
              <a-select
                placeholder="请选择系别"
                v-model="queryParam.deptId"
                allowClear
                @change="
                  reGetSpecialityList();
                  reGetClassesList();
                "
              >
                <a-select-option v-for="(b, index) in deptList" :key="index" :value="b.deptId">{{ b.deptName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item>
              <a-select placeholder="请选择专业" v-model="queryParam.specialityCode" @change="reGetClassesList" :loading="specialityListLoading" allowClear>
                <a-select-option v-for="(b, index) in specialityList" :key="index" :value="b.specialityCode">{{ b.specialityName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :xs="24">
            <a-form-item><a-input type="number" @change="gradeChange" placeholder="年级(如:2019)" v-model="queryParam.grade" allowClear/></a-form-item>
          </a-col>
          <a-col :md="8" :xs="24">
            <a-form-item>
              <a-select placeholder="请选择班级" v-model="queryParam.classesId" :loading="classesListLoading" allowClear>
                <a-select-option v-for="(b, index) in classesList" :key="index" :value="b.classesId">{{ b.classesName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="6" :xs="24">
            <a-form-item><a-input placeholder="请输入用户姓名" v-model="queryParam.userName" /></a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item>
              <a-select placeholder="请选择状态" v-model="queryParam.status" allowClear>
                <a-select-option v-for="(b, index) in signStatusList" :key="index" :value="b.dictValue">{{ b.dictLabel }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => (queryParam = { signJobId: queryParam.signJobId})">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- <div class="table-operator">
      <a-button v-if="addEnable" type="primary" icon="plus" @click="$refs.modal.add()">新建</a-button>
      <a-dropdown v-if="removeEnable && selectedRowKeys.length > 0"><a-button type="danger" icon="delete" @click="delByIds(selectedRowKeys)">删除</a-button></a-dropdown>
    </div> -->
    <s-table
      size="default"
      ref="table"
      rowKey="id"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data="loadData">
      <span slot="status" slot-scope="text">{{ text | signStatusFilter }}</span>
      <!-- <span slot="action" slot-scope="text, record">
        <a v-if="editEnabel" @click="handleEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a v-if="removeEnable" @click="delByIds([record.id])">删除</a>
      </span> -->
    </s-table>
  </a-modal>
</template>

<script>
import { STable } from '@/components'
import { getSysSignDetailList, delSysSignDetail } from '@/api/signDetail'
import { getDeptTeachList } from '@/api/system'
import { getSpecialityList } from '@/api/speciality'
import { getClassesList } from '@/api/classes'
// import SignDetailModal from './SignDetailModal.vue'
import { checkPermission } from '@/utils/permissions'
import { getDictArray } from '@/utils/dict'
const signStatusMap = {}
var timeout
export default {
  name: 'TableList',
  components: {
    STable
    // SignDetailModal
  },
  data () {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      form: this.$form.createForm(this),
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '用户姓名',
          dataIndex: 'userName'
        },
        {
          title: '签到时间',
          dataIndex: 'signTime',
          sorter: true
        },
        {
          title: '任务状态',
          dataIndex: 'status',
          sorter: true,
          scopedSlots: { customRender: 'status' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getSysSignDetailList(Object.assign(parameter, this.queryParam))
      },
      selectedRowKeys: [],
      selectedRows: [],
      addEnable: checkPermission('system:sysSignDetail:add'),
      editEnabel: checkPermission('system:sysSignDetail:edit'),
      removeEnable: checkPermission('system:sysSignDetail:remove'),
      signStatusList: [],
      deptList: [],
      specialityList: [],
      specialityListLoading: false,
      classesList: [],
      classesListLoading: false
    }
  },
  filters: {
    signStatusFilter (type) {
      return signStatusMap[type]
    }
  },
  created () {
    this.reGetSpecialityList()
    this.reGetClassesList()

    getDictArray('sign_status').then(res => {
      this.signStatusList = res
      res.map(item => {
        signStatusMap[item.dictValue] = item.dictLabel
      })
    })

    getDeptTeachList().then(res => {
      if (res.code === 0) {
        this.deptList = res.data
      }
    })
  },
  methods: {
    show (id) {
      this.visible = true
      this.queryParam.signJobId = id
      this.signJobId = id
      this.$refs.table && this.$refs.table.refresh(true)
    },
    gradeChange (e) {
      if (timeout) {
        clearTimeout(timeout)
        timeout = null
      }

      timeout = setTimeout(() => {
        this.reGetClassesList()
      }, 500)
    },
    reGetSpecialityList () {
      this.specialityListLoading = true
      getSpecialityList({
        deptId: this.queryParam.deptId
      }).then(res => {
        if (
          !res.filter(item => {
            return item.specialityCode === this.queryParam.specialityCode
          }).length
        ) {
          delete this.queryParam.specialityCode
        }
        this.specialityList = res
        this.specialityListLoading = false
      })
    },
    reGetClassesList () {
      this.classesListLoading = true
      getClassesList({
        deptId: this.queryParam.deptId,
        specialityCode: this.queryParam.specialityCode,
        grade: this.queryParam.grade
      }).then(res => {
        if (
          !res.filter(item => {
            return item.classesId === this.queryParam.classesId
          }).length
        ) {
          delete this.queryParam.classesId
        }
        this.classesList = res
        this.classesListLoading = false
      })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handleAdd () {
      this.$refs.modal.add()
    },
    handleEdit (record) {
      this.$refs.modal.edit(record)
    },
    handleOk () {
      this.$refs.table.refresh(true)
    },
    delByIds (ids) {
      delSysSignDetail({ ids: ids.join(',') }).then(res => {
        if (res.code === 0) {
          this.$message.success('删除成功')
          this.handleOk()
        } else {
          this.$message.error(res.msg)
        }
        this.selectedRowKeys = []
      })
    }
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  }
}
</script>
